<template>
  <div>
    <div
      class="none-goods-box"
    >
      <div class="flex">
        <img
          :src="noneGoods"
          alt=""
          class="none-goods-pic"
        >
        <div class="info">
          <p class="font-16 font-w">商品走丢啦...</p>
          <p>快去瞅瞅别的好货吧！</p>
          <el-button class="go-other-btn" @click="goOhter">去逛逛</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import noneGoods from '@/assets/images/none_goods.png'
export default defineComponent({
  name: 'NoneData',
  setup() {
    const router = useRouter()
    onMounted(() => {
    })
    const goOhter = () => {
      router.push({ path: '/' })
    }

    return {
      noneGoods,
      goOhter
    }
  }
})
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  .none-goods-box{
    padding: 133px 0 133px 410px;
    .none-goods-pic{
      width: 274px;
      height: 382px;
      margin-right: 138px;
    }
    .info{
      padding-top: 146px;
    }
    p{
      margin: 0;
      padding: 0;
      &:first-child{
        padding: 0 0 3px 0;
      }
    }
    ::v-deep(.go-other-btn){
      &.el-button{
        background:$darkBlue;
        color: #fff;
        border-radius: 0;
        min-height: 30px;
        border: none;
        font-size: 14px;
        padding: 0 12px;
        margin-top: 16px;
      }
    }
  }
</style>
